<template>
	<div id='order-operation'>
		<div @click='payOrder'>
			付款 &nbsp;{{showTime}}
		</div>
		<div @click='closeOrder'>
			取消订单
		</div>
	</div>
</template>

<script>
	export default {
		props:['time'],
		// beforeCreate(){
		// 	this.animationTime=this.time;
		// }
		data(){
			return ({
				animationTime:this.time
			});
		},
		computed:{
			showTime(){
				return Math.floor(this.animationTime/1000/60)+':'+this.animationTime/1000%60;
			}
		},
		created(){
			this.changeTime();
		},
		methods:{
			payOrder(){
				this.$emit('payOrder');
			},
			closeOrder(){
				this.$emit('closeOrder');
			},
			changeTime(){
				let This=this;
				let time=setInterval(function(){
					let nowTime=This.animationTime;
					if(nowTime){
						This.animationTime=nowTime-1000;
					}else{
						This.$emit('orderOver');
						clearInterval(time);
					}
				},1000);
			}
		}
	}
</script>

<style scoped>
	#order-operation{
		position: fixed;
		bottom:0;
		padding: 15px;
		width: 100%;
		height: 30px;
		background: white;
	}
	#order-operation div{
		height:30px;
		padding: 0 10px;
		line-height: 30px;
		text-align: center;
		border-radius: 3px;
	}
	#order-operation div:first-of-type{
		float:right;
		margin: 0 2rem;
		background: -o-linear-gradient(left,#fa6913,#fa281d); 
        background: -moz-linear-gradient(left,#fa6913,#fa281d); 
        background: linear-gradient(left,#fa6913,#fa281d); 
		background: -webkit-linear-gradient(left,#fa6913,#fa281d);
		color: white;
		font-weight: 100;
	}
	#order-operation div:last-of-type{
		float:right;
		margin-right: -1rem;
		border: 1px solid #999;
	}
</style>